<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
    let websocket = null;
    if('WebSocket' in window){
        websocket=new WebSocket("ws://localhost:9004/talk/1");
    }else{
        alert("error");
    }

    websocket.onmessage=function (event) {
        setMsg(event.data);
    }

    function setMsg(msg){
         let json = eval("("+msg+")");
         if(json.flag==2){
              var users = json.msg;
              $("#users").empty();
              for(let i=0;i<users.length;i++){
                  let user=users[i];
                  $("#users").append("<li>"+user.text+"</li>");
              }
         }else{
              $("#tx1").append(json.msg+"\n");
         }
    }
	
    function send() {
        websocket.send($("#tx2").val());
        $("#tx2").val("");
    }
</script>
</head>
<body>
<body class="easyui-layout" style="width: 800px;height: 600px">   
    <div data-options="region:'west',title:'在线列表',split:true" style="width:200px;">
       <ul id="users"></ul>
    </div>   
    <div data-options="region:'center',title:'聊天窗口'" style="padding:5px;">
       <table>
          <tr>
            <td>
               <textarea rows="25" cols="80" id="tx1" readonly="readonly"></textarea>
            </td>
          </tr>
          <tr>
            <td>
               <textarea rows="8" cols="80" id="tx2"></textarea>
            </td>
          </tr>
          <tr>
            <td align="right">
               <button type="button" onclick="send()">发送</button>
            </td>
          </tr>
       </table>  
    </div>   
</body>
</body>
</html>